<template>
    <el-dialog :title="title" :visible.sync="roleShowEdit" width="30%" :before-close="roleclose">
          <el-form :model="addForm" :rules="rules" ref="addForm" label-width="90px">
            <el-form-item label="角色名称" prop="role_name">
              <el-input v-model="addForm.role_name" style="width:100%;" placeholder="角色名称"></el-input>
            </el-form-item>
            <el-form-item label="分配权限" prop="rule_ids">
                <el-tree :data="menusList" show-checkbox node-key="id" :props="defaultProps" ref="tree" accordion>
                </el-tree>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancelBtn">取 消</el-button>
            <el-button type="primary" @click="confirmAddform">保 存</el-button>
          </div>
    </el-dialog>
</template>
<script>
import {ruleTreeList,roleAdd,roleUpdate} from '@/api/release'
export default{
    props:{
        title:[String],
		roleShowEdit:[Boolean],
        rowObj:[Object]
	},
    data(){
        return{
            firmOptions:[], //角色名称
            roleOptions:[], //分配权限
            addForm:{
                role_name:"",
                rule_ids:"",
            },
            rules:{
                role_name:[{ required: true, message: '请输入角色名称', trigger: 'blur' }],
                rule_ids:[{ required: true, message: '分配权限', trigger: 'change' }],
            },
            menusList:[],
            defaultProps: {
                children: 'children',
                label: 'title'
            },
            rulesAry:[],
            newRowObj:{}
        }
    },
    created(){
        this.getTreeList();
    },
    watch: {
        rowObj(newVal, oldVal){
            this.newRowObj = newVal;
            if(Object.values(newVal).length>0){
                this.addForm.role_name = newVal.role_name;
                this.rulesAry = newVal.rule_ids.split(',');
                this.$nextTick( ()=> {
                    this.rulesAry.forEach(value => {
                        this.$refs.tree.setChecked(value, true, false);
                    })
                })
            }else{
                this.reset();
            }
        }
    },
    methods:{
        getTreeList(){
            ruleTreeList().then(res=>{
                this.menusList = res.data;
            });
        },
        reset(){
           // 把已选中的复选框清除
            this.$nextTick(()=>{
                this.$refs.tree.setCheckedKeys([]);
            })
        },
        /**点击取消**/
        cancelBtn(){
            this.$emit('cancelHandle');
            this.$refs.addForm.resetFields();
            this.reset();
        },
        roleclose(){
            this.$emit('cancelHandle');
            this.$refs.addForm.resetFields();
            this.reset();
        },
        /**点击保存**/
        confirmAddform(){
            let arr = this.$refs.tree.getCheckedKeys();
            let arrHalf = this.$refs.tree.getHalfCheckedKeys();
            this.addForm.rule_ids = arr.concat(arrHalf).toString();
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    if(Object.values(this.newRowObj).length>0){
                        const obj3 = { ...this.addForm, id:this.newRowObj.id};
                        this.roleUpdateApi(obj3);
                    }else{
                        this.roleAddApi();
                    }
                    
                } else {
                    return false;
                }
            });
        },
        // 角色添加
        roleAddApi(){
            roleAdd(this.addForm).then(res =>{
                this.$message({
                    message: res.msg,
                    type: 'success'
                })
                this.$emit('saveSuc');
                this.$refs.addForm.resetFields();
                this.reset();
            });
        },
        // 角色编辑
        roleUpdateApi(obj){
            roleUpdate(obj).then(res =>{
                this.$message({
                    message: res.msg,
                    type: 'success'
                })
                this.$emit('saveSuc');
                this.$refs.addForm.resetFields();
                this.reset();
            });
        },

    }

    
}
</script>
<style lang="sass" scoped>

</style>